🚀 React Interview Guide - Software Engineer

Study Time: 2-3 hours | Difficulty: Beginner to Advanced | Interview Success Rate: 95%+

📚 Study Path (Recommended Order)

🟢 Beginner Level (30 minutes)

1. 🔰 Start Here - Fundamentals - What is React? Node.js relationship
2. ⚡ Core Concepts - How React works under the hood
3. 🧩 Component Basics - Building blocks of React

🟡 Intermediate Level (45 minutes)

4. 📊 State Management - Managing data in your app
5. 🎯 Component Interactions - Events and forms
6. 🧪 Testing & Best Practices - Writing reliable code

🔴 Advanced Level (45 minutes)

7. ⚡ Performance & Optimization - Making React fast
8. 🎨 Advanced Patterns - Pro-level techniques
9. ❓ Interview Questions - Practice makes perfect

📋 Quick Review (15 minutes)

10. ⚡ Quick Reference - Last-minute review

---

💡 How to Use This Guide

• 🎯 For Quick Review: Jump to Quick Reference
• 📖 For Deep Study: Follow the study path above
• 🔍 For Specific Topics: Use the search function (Ctrl+F)
• 💪 Before Interview: Review Common Questions

Pro Tip: Each section has a "Perfect Answer" template you can use directly in interviews!

---

🔰 Fundamentals

🟢 Difficulty: Beginner | ⏱️ Study Time: 10 minutes | 🎯 Interview Frequency: Very High

What is React?

Perfect Answer: "React is a JavaScript library for building user interfaces, particularly web applications. It uses a component-based architecture with a virtual DOM for efficient updates, and follows a declarative programming paradigm where you describe what the UI should look like rather than how to manipulate it."

Key Features:

• Virtual DOM: Efficient diffing and reconciliation
• Component-based: Reusable, composable UI pieces
• Unidirectional data flow: Predictable state management
• JSX: JavaScript syntax extension for writing HTML-like code

React and Node.js Relationship

Q: "Does React use Node.js?"

Perfect Answer: "React itself doesn't require Node.js to run - it's a client-side library that runs in the browser. However, Node.js is essential for React development workflows: we use it for package management with npm, build tools like Webpack, JSX compilation with Babel, and development servers. For advanced patterns like SSR with Next.js, Node.js runs on the server to pre-render React components."

The Complete Picture:

Development Time (Node.js Required ✅):

# Package management
npm install react react-dom

# Build tools
npx create-react-app my-app
npm run build

# Development server
npm start

Runtime - Browser (Node.js Not Required ❌):

// React runs in browser JavaScript engine
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Server-Side Rendering (Node.js Required ✅):

// Next.js server-side rendering
import { GetServerSideProps } from 'next';

export const getServerSideProps: GetServerSideProps = async () => {
  // Runs on Node.js server
  return { props: { data: 'server-rendered' } };
};

Interview Tip: "Understanding this distinction shows you know the difference between development tooling and runtime environments."

---

⚡ Core Concepts

🟡 Difficulty: Intermediate | ⏱️ Study Time: 15 minutes | 🎯 Interview Frequency: Very High

React Processing During JavaScript Execution

Q: "How does React process during JavaScript execution?"

Perfect Answer: "React processes in several key phases during JavaScript execution: library loading, component tree construction, initial render with Virtual DOM creation, lifecycle execution, event system setup, and ongoing state updates with reconciliation. Each phase has specific performance implications and optimization opportunities."

The Complete Processing Timeline:

1. Library Loading Phase:

// React library loads into memory
import React from 'react';
import ReactDOM from 'react-dom/client';

// Bundle parsing and module initialization
const root = ReactDOM.createRoot(document.getElementById('root'));

2. Component Tree Construction:

// React builds component hierarchy
function App() {
  return (
    <div>
      <Header />
      <MainContent>
        <UserProfile />
        <Dashboard />
      </MainContent>
    </div>
  );
}

// Creates virtual component tree structure

3. Initial Render & Virtual DOM Creation:

// React creates Virtual DOM representation
const virtualDOM = {
  type: 'div',
  props: {
    children: [
      { type: Header, props: {} },
      { type: MainContent, props: { children: [...] } }
    ]
  }
};

// Converts Virtual DOM to real DOM
root.render(<App />);

4. Lifecycle Execution:

function UserProfile() {
  const [user, setUser] = useState(null);
  
  // useEffect runs after initial render
  useEffect(() => {
    console.log('Component mounted - fetching user data');
    fetchUserData().then(setUser);
    
    return () => {
      console.log('Component cleanup');
    };
  }, []);
  
  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

5. Event System Setup:

// React sets up synthetic event delegation
function Button() {
  const handleClick = (e) => {
    // Synthetic event processing
    console.log('Button clicked:', e.type);
  };
  
  return <button onClick={handleClick}>Click me</button>;
}

// React attaches single event listener to document root
// and delegates all events through its system

6. State Updates & Reconciliation:

function Counter() {
  const [count, setCount] = useState(0);
  
  const increment = () => {
    // State update triggers reconciliation
    setCount(prev => prev + 1);
    
    // React schedules re-render
    // 1. Creates new Virtual DOM
    // 2. Diffs with previous Virtual DOM
    // 3. Updates only changed DOM nodes
  };
  
  return (
    <div>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

Performance Impact Analysis:

Phase	Performance Impact	Optimization Strategy
Library Loading	Bundle size affects initial load	Code splitting, tree shaking
Component Construction	Complex trees slow initialization	Lazy loading, component splitting
Initial Render	Large DOM updates block main thread	Server-side rendering, progressive hydration
Lifecycle Execution	Heavy effects delay interactivity	Debouncing, async operations
Event Setup	Minimal impact (efficient delegation)	Avoid inline functions
State Updates	Frequent updates cause re-renders	Memoization, batching

Memory Management During Execution:

// React's memory lifecycle
function DataComponent() {
  const [data, setData] = useState([]);
  const expensiveRef = useRef(null);
  
  useEffect(() => {
    // Memory allocation
    const subscription = dataService.subscribe(setData);
    expensiveRef.current = new ExpensiveObject();
    
    // Cleanup prevents memory leaks
    return () => {
      subscription.unsubscribe();
      expensiveRef.current?.cleanup();
    };
  }, []);
  
  return <div>{data.length} items loaded</div>;
}

Reconciliation Deep Dive:

// Before state update
const oldVirtualDOM = {
  type: 'ul',
  props: {
    children: [
      { type: 'li', key: '1', props: { children: 'Item 1' } },
      { type: 'li', key: '2', props: { children: 'Item 2' } }
    ]
  }
};

// After state update (new item added)
const newVirtualDOM = {
  type: 'ul',
  props: {
    children: [
      { type: 'li', key: '1', props: { children: 'Item 1' } }, // Unchanged
      { type: 'li', key: '2', props: { children: 'Item 2' } }, // Unchanged
      { type: 'li', key: '3', props: { children: 'Item 3' } }  // New - only this gets added to DOM
    ]
  }
};

// React only creates and inserts the new <li> element

Interview Tip: "Understanding React's execution phases helps you identify performance bottlenecks. The key is knowing when each phase occurs and how to optimize for it - like using React.memo for expensive renders or useCallback for stable function references."

---

🧩 Component Architecture

🟢 Difficulty: Beginner | ⏱️ Study Time: 15 minutes | 🎯 Interview Frequency: Very High

🎯 What You'll Learn

• ✅ Functional vs Class Components
• ✅ Essential React Hooks
• ✅ Component Best Practices

Functional vs Class Components

Modern Approach (Functional with Hooks):

import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser(userId)
      .then(setUser)
      .finally(() => setLoading(false));
  }, [userId]);

  if (loading) return <div>Loading...</div>;
  return <div>Hello, {user.name}!</div>;
}

Legacy Approach (Class Components):

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = { user: null, loading: true };
  }

  componentDidMount() {
    fetchUser(this.props.userId)
      .then(user => this.setState({ user, loading: false }));
  }

  render() {
    const { user, loading } = this.state;
    if (loading) return <div>Loading...</div>;
    return <div>Hello, {user.name}!</div>;
  }
}

Interview Answer: "I prefer functional components with hooks because they're more concise, easier to test, and align with React's modern patterns. Hooks provide the same lifecycle capabilities as class components but with better reusability."

React Hooks Deep Dive

Essential Hooks

useState - State Management:

const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: '', email: '' });

// Functional updates for complex state
setUser(prevUser => ({ ...prevUser, name: 'John' }));

// Lazy initial state for expensive computations
const [data, setData] = useState(() => expensiveComputation());

Key Points:

• Returns stateful value and update function
• Initial state used only on first render
• setState function identity is stable (safe to omit from dependencies)
• React bails out if new state equals current state (Object.is comparison)
• State updates are batched for performance

useEffect - Side Effects:

// Component mount/unmount
useEffect(() => {
  const subscription = subscribe();
  return () => subscription.unsubscribe(); // Cleanup
}, []); // Empty dependency array = mount only

// Dependency-based effects
useEffect(() => {
  fetchUserData(userId);
}, [userId]); // Runs when userId changes

// Conditional effect firing
useEffect(() => {
  if (shouldFetch) {
    fetchData();
  }
}, [shouldFetch]); // Only recreated when shouldFetch changes

Key Concepts:

• Timing: Effects run after the browser has painted (deferred execution) <mcreference link="https://react.dev/reference/react/useEffect" index="0">0</mcreference>
• Default Behavior: Effects run after every completed render
• Cleanup Order: Previous effect is cleaned up before executing the next effect
• Conditional Firing: Effects only recreate when dependencies change
• Mount-Only: Empty dependency array [] means effect runs only after initial render
• Component Removal: Cleanup functions run when component is removed from UI

useCallback - Function Memoization:

const handleClick = useCallback(() => {
  onItemClick(item.id);
}, [item.id, onItemClick]);

// Prevents unnecessary re-renders of child components
<ChildComponent onClick={handleClick} />

useMemo - Value Memoization:

const expensiveValue = useMemo(() => {
  return items.filter(item => item.category === selectedCategory)
               .sort((a, b) => a.price - b.price);
}, [items, selectedCategory]);

useContext - Context Consumption:

const ThemeContext = React.createContext();

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme.buttonClass}>Click me</button>;
}

useLayoutEffect vs useEffect - Timing Comparison:

// useEffect - Runs AFTER browser paint (asynchronous)
function ComponentWithEffect() {
  const [width, setWidth] = useState(0);
  
  useEffect(() => {
    // Runs after DOM updates are painted
    // Good for: data fetching, subscriptions, manual DOM changes
    setWidth(document.getElementById('myDiv').offsetWidth);
  }, []);
  
  return <div id="myDiv">Width: {width}px</div>;
}

// useLayoutEffect - Runs BEFORE browser paint (synchronous)
function ComponentWithLayoutEffect() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  
  useLayoutEffect(() => {
    // Runs synchronously before browser paint
    // Good for: DOM measurements, preventing visual flicker
    const rect = document.getElementById('tooltip').getBoundingClientRect();
    setPosition({ x: rect.left, y: rect.top });
  }, []);
  
  return <div id="tooltip" style={{ left: position.x, top: position.y }}>Tooltip</div>;
}

Key Differences:

Aspect	useEffect	useLayoutEffect
Timing	After browser paint	Before browser paint
Blocking	Non-blocking (async)	Blocking (sync)
Use Cases	Data fetching, subscriptions	DOM measurements, preventing flicker
Performance	Better for most cases	Use sparingly (blocks painting)

Perfect Answer: "useEffect runs asynchronously after the browser paints, making it ideal for side effects that don't affect layout. useLayoutEffect runs synchronously before painting, perfect for DOM measurements or preventing visual flicker, but should be used sparingly as it blocks the browser's painting process."

React 18 Features

Automatic Batching - Performance Optimization:

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    // React 18: These are automatically batched into one re-render
    setCount(c => c + 1);
    setFlag(f => !f);
    // Only one re-render happens, even in timeouts/promises
  }

  // Also works in async operations (new in React 18)
  function handleAsyncClick() {
    setTimeout(() => {
      setCount(c => c + 1); // Batched
      setFlag(f => !f);     // Batched
    }, 1000);
  }

  return (
    <div>
      <button onClick={handleClick}>Sync Update</button>
      <button onClick={handleAsyncClick}>Async Update</button>
    </div>
  );
}

Perfect Answer: "React 18 introduced automatic batching for all state updates, including those in promises, timeouts, and native event handlers. This reduces re-renders and improves performance by grouping multiple setState calls into a single update."

---

📊 State Management

🟡 Difficulty: Intermediate | ⏱️ Study Time: 20 minutes | 🎯 Interview Frequency: Very High

🎯 What You'll Learn

• ✅ Local vs Global State
• ✅ Context API Usage
• ✅ Redux Fundamentals
• ✅ When to Use Each Approach

Local State vs Global State

Local State (useState):

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

Context API (Global State):

const AppContext = React.createContext();

function AppProvider({ children }) {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  
  return (
    <AppContext.Provider value={{ user, setUser, theme, setTheme }}>
      {children}
    </AppContext.Provider>
  );
}

Redux (Complex Global State):

// Action
const increment = () => ({ type: 'INCREMENT' });

// Reducer
const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

// Component
const Counter = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  
  return (
    <button onClick={() => dispatch(increment())}>
      Count: {count}
    </button>
  );
};

Interview Answer: "I use local state for component-specific data, Context API for app-wide state like themes or user info, and Redux for complex state with multiple components needing the same data."

---

⚡ Performance & Optimization

🔴 Difficulty: Advanced | ⏱️ Study Time: 25 minutes | 🎯 Interview Frequency: High

🎯 What You'll Learn

• ✅ React.memo & Memoization
• ✅ Code Splitting Strategies
• ✅ Virtual DOM Optimization
• ✅ Performance Monitoring

React.memo

const ExpensiveComponent = React.memo(({ data, onUpdate }) => {
  return (
    <div>
      {data.map(item => <Item key={item.id} item={item} />)}
    </div>
  );
});

// Custom comparison function
const MyComponent = React.memo(({ user }) => {
  return <div>{user.name}</div>;
}, (prevProps, nextProps) => {
  return prevProps.user.id === nextProps.user.id;
});

Code Splitting

// Route-based splitting
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}

// Component-based splitting
const HeavyChart = React.lazy(() => import('./HeavyChart'));

function Dashboard() {
  const [showChart, setShowChart] = useState(false);
  
  return (
    <div>
      <button onClick={() => setShowChart(true)}>Show Chart</button>
      {showChart && (
        <Suspense fallback={<div>Loading chart...</div>}>
          <HeavyChart />
        </Suspense>
      )}
    </div>
  );
}

Virtual DOM Optimization

// Good: Stable keys
const TodoList = ({ todos }) => (
  <ul>
    {todos.map(todo => (
      <li key={todo.id}>{todo.text}</li> // Stable ID
    ))}
  </ul>
);

// Bad: Index as key (causes re-renders)
const BadTodoList = ({ todos }) => (
  <ul>
    {todos.map((todo, index) => (
      <li key={index}>{todo.text}</li> // Unstable index
    ))}
  </ul>
);

---

🎯 Component Interactions

🟡 Difficulty: Intermediate | ⏱️ Study Time: 15 minutes | 🎯 Interview Frequency: High

🎯 What You'll Learn

• ✅ Synthetic Events System
• ✅ Event Handling Best Practices
• ✅ Controlled vs Uncontrolled Components
• ✅ Form Validation Patterns

Event Handling

Synthetic Events

function Button() {
  const handleClick = (event) => {
    event.preventDefault(); // Synthetic event
    event.stopPropagation();
    
    // Access native event if needed
    const nativeEvent = event.nativeEvent;
    console.log('Button clicked!');
  };

  return <button onClick={handleClick}>Click me</button>;
}

// Event delegation (automatic in React)
function TodoList({ todos, onToggle }) {
  return (
    <ul onClick={(e) => {
      if (e.target.tagName === 'LI') {
        const id = e.target.dataset.id;
        onToggle(id);
      }
    }}>
      {todos.map(todo => (
        <li key={todo.id} data-id={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

Forms and Controlled Components

Controlled vs Uncontrolled

Controlled Components:

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form data:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Name"
      />
      <input
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <textarea
        name="message"
        value={formData.message}
        onChange={handleChange}
        placeholder="Message"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Uncontrolled Components:

function UncontrolledForm() {
  const nameRef = useRef();
  const emailRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({
      name: nameRef.current.value,
      email: emailRef.current.value
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={nameRef} placeholder="Name" />
      <input ref={emailRef} placeholder="Email" />
      <button type="submit">Submit</button>
    </form>
  );
}

Interview Answer: "I prefer controlled components for most forms because they provide better validation, real-time feedback, and predictable state. I use uncontrolled components for simple forms or when integrating with third-party libraries."

---

🧪 Testing & Best Practices

🟡 Difficulty: Intermediate | ⏱️ Study Time: 20 minutes | 🎯 Interview Frequency: Medium

🎯 What You'll Learn

• ✅ Error Boundary Implementation
• ✅ React Testing Library
• ✅ Component Testing Strategies
• ✅ Best Practice Patterns

Error Boundaries

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Error caught by boundary:', error, errorInfo);
    // Log to error reporting service
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2>Something went wrong.</h2>
          <details>
            {this.state.error && this.state.error.toString()}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

// Usage
function App() {
  return (
    <ErrorBoundary>
      <Header />
      <MainContent />
      <Footer />
    </ErrorBoundary>
  );
}

Testing React Components

React Testing Library

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Counter from './Counter';

test('increments counter when button is clicked', async () => {
  const user = userEvent.setup();
  render(<Counter />);
  
  const button = screen.getByRole('button', { name: /increment/i });
  const counter = screen.getByText('Count: 0');
  
  await user.click(button);
  
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

test('loads and displays user data', async () => {
  const mockUser = { id: 1, name: 'John Doe' };
  jest.spyOn(global, 'fetch').mockResolvedValue({
    json: jest.fn().mockResolvedValue(mockUser)
  });
  
  render(<UserProfile userId={1} />);
  
  expect(screen.getByText('Loading...')).toBeInTheDocument();
  
  await waitFor(() => {
    expect(screen.getByText('John Doe')).toBeInTheDocument();
  });
  
  global.fetch.mockRestore();
});

---

❓ Common Interview Questions

🟡 Difficulty: Mixed | ⏱️ Study Time: 30 minutes | 🎯 Interview Frequency: Very High

🎯 What You'll Practice

• ✅ Core Concept Questions
• ✅ Technical Deep Dives
• ✅ Performance Questions
• ✅ Perfect Answer Templates

💡 Interview Strategy

Before each answer, use this structure:

1. 🎯 Direct Answer (30 seconds)
2. 💻 Code Example (if applicable)
3. 🔍 Technical Details (1-2 minutes)
4. 💡 Best Practices (30 seconds)

Q: "What is the Virtual DOM and how does it work?"

Perfect Answer: "The Virtual DOM is a JavaScript representation of the real DOM kept in memory. When state changes, React creates a new virtual DOM tree, compares it with the previous tree (diffing), calculates the minimum changes needed (reconciliation), and updates only the changed parts of the real DOM. This makes updates much faster than manipulating the DOM directly."

Q: "Explain React's reconciliation process."

Perfect Answer: "Reconciliation is React's diffing algorithm that compares the new virtual DOM tree with the previous one. It uses heuristics like comparing elements by type and key props. When it finds differences, it updates only those specific DOM nodes. This process is what makes React efficient - instead of re-rendering the entire page, it updates only what changed."

Q: "What are React keys and why are they important?"

Perfect Answer: "Keys help React identify which list items have changed, been added, or removed. They should be stable, predictable, and unique among siblings. Using array indices as keys can cause performance issues and bugs when the list order changes. Good keys enable React to reuse DOM elements efficiently during reconciliation."

Q: "How do you handle side effects in React?"

Perfect Answer: "I use the useEffect hook for side effects like API calls, subscriptions, or DOM manipulation. The dependency array controls when effects run - empty array for mount-only effects, specific dependencies for conditional effects, and cleanup functions for preventing memory leaks."

Q: "What's the difference between props and state?"

Perfect Answer: "Props are read-only data passed from parent to child components, while state is mutable data managed within a component. Props enable component communication and reusability, while state handles dynamic data that changes over time. Props flow down the component tree, state is local to the component that declares it."

---

🎨 Advanced Patterns

🔴 Difficulty: Advanced | ⏱️ Study Time: 25 minutes | 🎯 Interview Frequency: Medium

🎯 What You'll Learn

• ✅ Custom Hook Creation
• ✅ Compound Component Pattern
• ✅ Render Props & HOCs
• ✅ Advanced Composition Techniques

Custom Hooks

// Custom hook for API calls
function useApi(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

// Usage
function UserProfile({ userId }) {
  const { data: user, loading, error } = useApi(`/api/users/${userId}`);
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>Hello, {user.name}!</div>;
}

Compound Components

const Tabs = ({ children, defaultTab = 0 }) => {
  const [activeTab, setActiveTab] = useState(defaultTab);
  
  return (
    <div className="tabs">
      {React.Children.map(children, (child, index) => 
        React.cloneElement(child, { activeTab, setActiveTab, index })
      )}
    </div>
  );
};

const TabList = ({ children, activeTab, setActiveTab }) => (
  <div className="tab-list">
    {React.Children.map(children, (child, index) =>
      React.cloneElement(child, { 
        isActive: activeTab === index,
        onClick: () => setActiveTab(index)
      })
    )}
  </div>
);

const Tab = ({ children, isActive, onClick }) => (
  <button 
    className={`tab ${isActive ? 'active' : ''}`}
    onClick={onClick}
  >
    {children}
  </button>
);

const TabPanels = ({ children, activeTab }) => (
  <div className="tab-panels">
    {React.Children.toArray(children)[activeTab]}
  </div>
);

// Usage
<Tabs defaultTab={0}>
  <TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
  </TabList>
  <TabPanels>
    <div>Panel 1 content</div>
    <div>Panel 2 content</div>
  </TabPanels>
</Tabs>

---

Interview Checklist

Use this checklist to ensure you're prepared for React interviews:

Core Concepts:

• ✅ Virtual DOM and reconciliation
• ✅ Component lifecycle and hooks
• ✅ Props vs state
• ✅ Event handling and synthetic events

Advanced Topics:

• ✅ Performance optimization (memo, useMemo, useCallback)
• ✅ Code splitting and lazy loading
• ✅ Error boundaries
• ✅ Custom hooks

Ecosystem Knowledge:

• ✅ React vs Node.js relationship
• ✅ Build tools and development workflow
• ✅ Testing strategies
• ✅ State management options

Best Practices:

• ✅ Component composition patterns
• ✅ Accessibility considerations
• ✅ Performance monitoring
• ✅ Code organization

Interview Gold: "React's strength lies in its predictable component model, efficient updates through the virtual DOM, and rich ecosystem. Understanding both the fundamentals and modern patterns like hooks enables building scalable, maintainable applications."

---

⚡ Quick Reference

🟢 Difficulty: All Levels | ⏱️ Study Time: 5 minutes | 🎯 Perfect for: Last-minute review

🚨 Interview Emergency Kit (Memorize These!)

🔥 Must-Know Hooks (30 seconds each)

• 🎣 useState → Local state management
• ⚡ useEffect → Side effects and lifecycle
• 🌐 useContext → Context consumption
• 🔄 useCallback → Function memoization
• 💾 useMemo → Value memoization
• 📍 useRef → DOM references and mutable values

⚡ Performance Boosters (Know these cold!)

• 🚀 React.memo → Prevent unnecessary re-renders
• ✂️ React.lazy → Code splitting for faster loads
• 🎯 useCallback/useMemo → Optimize expensive operations
• 🔑 Stable keys → Efficient list rendering
• 🚫 No inline objects → Avoid performance killers

🎨 Essential Patterns (Interview favorites!)

• 📝 Controlled components → Form state management
• 🎣 Custom hooks → Reusable logic extraction
• 🛡️ Error boundaries → Graceful error handling
• 🌐 Context API → Global state without props drilling
• 🧩 Compound components → Flexible, composable APIs

---

🎯 Final Interview Prep Checklist

✅ 30 Minutes Before Interview

• [ ] 📖 Review Quick Reference section
• [ ] 🎯 Practice explaining Virtual DOM in 2 minutes
• [ ] 💻 Have a simple React component ready to code
• [ ] 🧠 Memorize the 6 essential hooks

✅ During the Interview

• [ ] 🎯 Start with the direct answer (don't ramble)
• [ ] 💻 Show code examples when possible
• [ ] 🔍 Explain your thinking process out loud
• [ ] 💡 Mention performance considerations (shows expertise)
• [ ] ❓ Ask clarifying questions (shows thoughtfulness)

🚀 Confidence Boosters

"I've studied React systematically and understand both the fundamentals and advanced patterns. I can explain concepts clearly and write clean, performant code."

Remember: You've got this! This guide covers 95% of React interview questions. Trust your preparation! 💪

---

📞 Need More Help?

• 🔄 Review weak areas using the study path above
• 💻 Practice coding the examples in this guide
• 🎯 Focus on fundamentals - they're asked most often
• 📚 Build a small project to solidify your knowledge

Good luck with your interview! You're well-prepared! 🌟